$colors: (
  'white': #fff,
  'black': #4c4c4c,
  'gray': #9c9c9c,
  'green': #3ea732,
  'blue': #63a6c9,
  'red': #E64141,
  'orange': #F6AE30,
  'success': #67C23A,
  'warning': #E6A23C,
  'danger': #F56C6C,
  'info': #909399,
);
$bgColors: (
  'white': #fff,
  'black': #000,
  'gray': #ddd,
  'efeff1': #efeff1,
  'blue': #598bad,
  'inner': #F4F7F9,
  'green':#70b603
);

// color
@each $colorType, $color in $colors {
  .color-#{$colorType} {
    color: $color;
  }
}

//background-color
@each $bgColorsType, $bgColors in $bgColors {
  .bg-#{$bgColorsType} {
    background-color: $bgColors;
  }
}

@for $index from 1 through 40 {
  // width
  .w#{$index*10} {
    width: #{$index * 10}px;
  }
  // max-width
  .max-w#{$index*10} {
    max-width: #{$index * 10}px;
  }
}

@for $index from 1 through 20 {
  // 宽度百分比
  .pct#{$index * 5} {
    width: #{$index * 5%};
  }
  @if $index > 4 {
    // width
    .w#{$index*20}i {
      width: #{$index * 20}px!important;
    }
  }
  // height
  .h#{($index - 1)*20 + 100} {
    height: #{($index - 1) * 20+100}px;
  }

  // min-height
  .mh#{$index*20} {
    min-height: #{$index * 20}px;
  }

  // font-size
  .f#{$index*2 + 10} {
    font-size: #{$index * 2+10}px;
  }

  // line-height
  .lh#{$index*2 + 10} {
    line-height: #{$index * 2+10}px;
  }

  // vertical-align
  .vn#{$index - 10} {
    vertical-align: #{$index - 10}px;
  }

  // border-radius
  @if $index < 5 {
    .border-radius-#{$index * 2} {
      border-radius: #{$index * 2}px;
    }
  }
}
@for $index from 2 through 9 {
  .fw#{($index - 1) * 100} {
    font-weight: #{($index - 1) * 100};
  }
}

// margin padding
@for $index from 1 through 11 {
  .m#{($index - 1) * 5} {
    margin: #{($index - 1) * 5}px;
  }
  .ml#{($index - 1) * 5} {
    margin-left: #{($index - 1) * 5}px;
  }
  .mr#{($index - 1) * 5} {
    margin-right: #{($index - 1) * 5}px;
  }
  .mt#{($index - 1) * 5} {
    margin-top: #{($index - 1) * 5}px;
  }
  .mb#{($index - 1) * 5} {
    margin-bottom: #{($index - 1) * 5}px;
  }
  .p#{($index - 1) * 5} {
    padding: #{($index - 1) * 5}px;
  }
  .pl#{($index - 1) * 5} {
    padding-left: #{($index - 1) * 5}px;
  }
  .pr#{($index - 1) * 5} {
    padding-right: #{($index - 1) * 5}px;
  }
  .pt#{($index - 1) * 5} {
    padding-top: #{($index - 1) * 5}px;
  }
  .pb#{($index - 1) * 5} {
    padding-bottom: #{($index - 1) * 5}px;
  }
}

/* flex：定义布局为盒模型 */
/* flex-v：盒模型垂直布局 */
/* flex-1：子元素占据剩余的空间 */
/* flex-center-y：子元素垂直居中 */
/* flex-center-x：子元素水平居中 */
/* flex-center-t：子元素顶部对齐 */
/* flex-right-x：子元素水平右对齐 */
.flex {
  display: flex;
  &-wrap {
    flex-wrap: wrap;
  }
  &-vertical {
    flex-direction: column;
  }
  &-1 {
    flex: 1;
  }
  &-center-y {
    align-items: center;
  }
  &-top-y {
    align-items: start;
  }
  &-center-x {
    justify-content: center;
  }
  &-right-x {
    justify-content: flex-end;
  }
  &-space-between {
    justify-content: space-between;
  }
  &-space-evenly {
    justify-content: space-evenly;
  }
  &-shrink {
    flex-shrink:0;
  }
  &-align-items-end {
    align-items: flex-end;
  }
  &-align-items-start {
    align-items: flex-start;
  }
}

.pct32{ width: 32%; }
.pct33{ width: 33.333333%; }
.pct66{ width: 66.666666%; }
.pct100{ width: 100% }
.pct100i{ width: 100%!important }
.lh1i{ line-height: 1!important; }
/* position */
.rel {
  position: relative;
}
.abs {
  position: absolute;
}

/* 清楚浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  clear: both;
  display: table;
}

.fb {
  font-weight: bold;
}
.fn {
  font-weight: normal;
}
.t-indent {
  text-indent: 2em;
}

/* text-align */
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}

/* float */
.fl {
  float: left;
}
.fr {
  float: right;
}

/* 单行文字溢出虚点显 示*/
.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  word-break: break-all;
}
/* 2行文字溢出虚点显 示*/
.ell2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 基于display: table-cell的自适应布局 */
.r-cell {
  display: table-cell;
  width: 2000px;
}

.vm {
  vertical-align: middle;
}
.vt {
  vertical-align: top;
}

.hide {
  display: none;
}
.inline {
  display: inline-block;
}
.block {
  display: block;
}
.of {
  overflow: hidden;
}
.of-auto {
  overflow: auto;
}
.scrollY {
  overflow-y: auto;
  overflow-x: hidden;
}
.nowrap {
  white-space: nowrap;
}
.tab-pane.active {
  display: block;
}
.tab-pane {
  display: none;
  clear: both;
}
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.rotate180 {
  transform: rotate(180deg);
}
.rotate-90 {
  transform: rotate(-90deg);
}
.rotate90 {
  transform: rotate(90deg);
}
.transiform {
  transition: all 0.2s 0s ease;
}
.m-auto {
  margin-left: auto;
  margin-right: auto;
}
.pointer {
  cursor: pointer;
}
.rem {
  font-size: 1rem;
}
.box-shadow {
  box-shadow: 1px 3px 27px 0 rgba(131, 136, 142, 0.3);
}
.border {
  border: 1px solid #e4e7ed;
}
.scale {
  transition: all 0.2s;
  &:hover {
    transform: scale(1.1);
  }
}
/* 蓝色字段 */
.field-blue {
  color: #8ab9d0;
}
/* 绿色字段 */
.field-green {
  color: #74f7ff;
}
/* 绿色字段 */
.field-green1 {
  color: #26e8ff;
}
/* 绿色字段 */
.field-green2 {
  color: #92e0f8;
}
/* 黄色字段 */
.field-yellow {
  color: #ffdb9b;
}
/* 红色字段 */
.field-red {
  color: #ff6f66;
}
/* 橙色 */
.field-orange {
  color: #f59a23;
}

.toggle-button {
  width: 60px;
  height: 25px;
  border-radius: 20px;
  background-color: #ccc; /* 默认灰色 */
  padding-left: 25px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  transition: background-color 0.3s;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #fff;
    left: 1px;
    top: 1px;
    transition: all 0.1s ease-in;
  }
  &.active{
    background-color: #0099ff; /* 蓝色 */
    padding-left: 5px;
    &::after{
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background-color: #fff;
      left: 36px;
      top: 1px;
    }
  }
  span{
    pointer-events: none; /* 禁止文字触发点击事件 */
  }
}
